<template>
  <div>
      <van-nav-bar
      title="药品说明书查询"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <el-card class="inpus">
        <el-row>
            <el-input v-model="height" placeholder="请输入身高"></el-input>
        </el-row>
        <el-row>
            <el-input v-model="weight" placeholder="请输入体重"></el-input>
        </el-row>
        <el-row>
            <el-button type="primary" @click="submit">搜索</el-button>
        </el-row>
    </el-card>
    <el-card v-show="dialog" style="margin-top:10px;">
        <el-descriptions title="BMI检测" column = 1 >
            <el-descriptions-item label="体重指数BMI">{{tabelDate.bmi}}</el-descriptions-item>
            <el-descriptions-item label="正常BMI指数范围">{{tabelDate.normbmi}}</el-descriptions-item>
            <el-descriptions-item label="标准体重">{{tabelDate.idealweight}}</el-descriptions-item>
            <el-descriptions-item label="正常体重范围">{{tabelDate.normweight}}</el-descriptions-item>
            <el-descriptions-item label="健康风险">{{tabelDate.healthy}}</el-descriptions-item>
            <el-descriptions-item label="身材小贴士">{{tabelDate.tip}}</el-descriptions-item>
        </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      height: '',
      weight: '',
      tabelDate: {},
      dialog: false
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/index')
    },
    async submit () {
      this.dialog = false
      const { data: res } = await this.$http.get('/health/bmi/index?key=c92f20eb170cdc18ef07aeb080bebdc8&height=' + this.height + '&weight=' + this.weight)
      this.tabelDate = res.newslist[0]
      this.dialog = true
    }
  }
}
</script>

<style scoped>
.inpus{
    width: 95%;
    margin: 0 auto;
    opacity: .7;
}
.content{
    min-height:400px;
    width: 100%;
    padding-bottom: 40px;
}
.inpus .el-button{
    width: 300px;
    display: block;
    margin: 20px auto;
    border-radius: 10px;
}
.inpus .el-input{
    margin: 5px 0;
}
</style>
